<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付10秒倒计时</title>
    <style>
        .box {
            width: 300px;
            height: 350px;
            background-color: gray;
            margin: 50px auto;
            border: 1px solid #333;
            color: #fff;
        }
        
        ul {
            margin: 40px auto;
        }
        
        li {
            list-style: none;
            line-height: 40px;
        }
        
        .btn {
            width: 100%;
        }
        
        .btn button {
            width: 60px;
            height: 30px;
            margin-left: 60px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>商品：Web前端课程</li>
            <li>原价：1980元</li>
            <li>现价：1.98元</li>
            <li>内容：HTML、CSS、JS</li>
            <li>地址：陕西西安</li>
        </ul>
        <div class="btn">
            <button>取消</button>
            <button>支付</button>
        </div>
    </div>
    <script>
        document.getElementsByTagName('button')[1].onclick = function() {
            let res = window.confirm('你确定要支付吗？');
            if (res) {
                location.href = 'pay.html ';
            }
        }
    </script>
</body>

</html>